// import { ref } from 'vue'
// const scale = {
//   width: ref('1'),
//   height: ref('1'),
// }

const baseWidth = 1700
const baseHeight = 770
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))


export const calcRate = (data) => {
  // const appRef = document.querySelector(data); window.innerWidth window.innerHeight
  // const currentRate = document.documentElement.getBoundingClientRect()
  if (!data.value) return
  const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
  data.value.style.transform = `scaleY(${(baseProportion)/(currentRate)})`
  data.value.style['transformOrigin'] = '0 0'
    // if (currentRate > baseProportion) {
    //   scale.width.value = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
    //   scale.height.value = (window.innerHeight / baseHeight).toFixed(5)
    //   data.value.style.transform = `scale(${scale.width.value}, ${scale.height.value}) translate(-50%, -50%)`
    // } else {
    //   scale.height.value = (window.innerWidth / baseProportion / baseHeight).toFixed(5)
    //   scale.width.value = (window.innerWidth / baseWidth).toFixed(5)
    //   data.value.style.transform = `scale(${scale.width.value}, ${scale.height.value}) translate(-50%, -50%)`
    //   data.value.style['transformOrigin'] = '0 0'
    // }
}